import React, { useEffect } from "react";
import "katex/dist/katex.min.css";
import TeX from "@matejmazur/react-katex";
import { useState } from "react";

const AbsComp: React.FC<{ absMessage: string }> = (props) => {
  const [absMessage, setAbsMessage] = useState(props.absMessage);
  useEffect(() => {
    const raw = absMessage;
    const result = raw.split(/\$(.*?)\$/g).map((part, index) => {
      if (index % 2 === 0) {
        return part;
      } else {
        return <TeX key={index}>{part}</TeX>;
      }
    });
    let finalMessage = "";
    result.forEach((item) => {
      finalMessage += item.toString();
    });

    setAbsMessage(finalMessage);
  }, [absMessage]);

  return (
    <>
      <div>
        <h3 style={{ backgroundColor: "#d4d4d4bb", textAlign: "left" }}>
          <span
            style={{
              display: "inline-block",
              height: "2ch",
              textTransform: "uppercase",
              fontSize: "3em",
            }}
          >
            a
          </span>
          {/*bs abs abs abs abs absabs abs abs abs abs absabs abs abs abs abs abs*/}
          {/*abs abs abs abs abs absabs abs abs abs abs absabs abs abs abs abs abs*/}
          {/*abs abs abs abs abs abs*/}
          {/*<TeX>{String.raw`\int_0^\infty x^2 dx \cdots   \eth \Im \coprod_{i=1}^{\frac{\underbrace{123}}{1}}`}</TeX>*/}
          {absMessage}
        </h3>
      </div>
    </>
  );
};

export default AbsComp;
